<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        h1 {
            text-align: center
        }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<h1>用户登录</h1>
<form class="form-horizontal" action="postLogin.php" method="post" onsubmit="return loginCheck();">
    <div class="form-group">
        <label for="username" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-8">
            <input  class="form-control" id="username" name="username" placeholder="请输入用户名"><span id="uMsg"></span>
        </div>
        <div class="col-sm-2">

        </div>
    </div>
    <div class="form-group">
        <label for="pw" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-8">
            <input type="password" name="pw" class="form-control" id="pw1" placeholder="请输入密码">
        </div>
        <div class="col-sm-2">

        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="remember" value="1"> 记住登录
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    function loginCheck() {
        var username = $("#username").val().trim();
        var pw = $("#pw").val().trim();
        if(username == "" || pw == ""){
            alert("用户名或密码必须填写！");
            return false;
        }
    }
    $(function () {
        $("#username").blur(function () {
            ajax();
        });
        function ajax() {
            $.ajax({
                url:'checkUsername.php',
                data:{
                    username:$("#username").val()
                },
                dataType:"json",
                type:'post',
                success:function (d) {
                    if(d.error == 1){  //说明找到此用户名
                        $("#uMsg").html('用户名正确');
                    }
                    else{
                        $("#uMsg").html('<font color="red">用户名错误</font>');
                    }
                },
                error:function () {
                    alert("网络错误");
                }
            })
        }
    })

</script>
</body>
</html>